

window.onload = function(){
    headerOpacityChange();
    timeBack();
    readJsonCreateBanner();
};

/*头部搜索框的透明度变化*/
function headerOpacityChange() {
   var header =  document.querySelector(".jd_header");


    window.addEventListener("scroll",function () {
        var banner = document.querySelector('.jd_banner');
        var bannerH = banner.offsetHeight;
        // 获取当前滚出屏幕的高度
       var offsetH = document.documentElement.scrollTop || document.body.scrollTop;
        var opacity = 1;
        if(offsetH < bannerH){
            opacity = offsetH / bannerH;
        }
       header.style.backgroundColor = "rgba(235,35,34,"+opacity+")";
   });
}
/*倒计时*/
function timeBack() {
    /*获取所有显示时间的span*/
    var allSpan = document.querySelector('.sk_time').querySelectorAll("span");
    /*计算时分秒*/
    var total =  6700;
    var timer = setInterval(function () {
        total -- ;
        if(total < 0){
            clearInterval(timer);
            return;
        }

        var hour = Math.floor(total/3600)
        var minute = Math.floor(total % 3600 / 60);
        var second = total % 60;
        /*赋值*/
        allSpan[0].innerHTML = Math.floor(hour/10);
        allSpan[1].innerHTML = hour % 10;

        allSpan[3].innerHTML = Math.floor(minute/10);
        allSpan[4].innerHTML = minute % 10;

        allSpan[6].innerHTML = Math.floor(second/10);
        allSpan[7].innerHTML = second % 10;
    },1000);

}


/*轮播图*/
function banner() {
    var banner = document.querySelector(".jd_banner");
    var imgBox = banner.querySelector("ul:first-of-type");
    var poitBox = banner.querySelector('ul:last-of-type');
    // 第一张图片
    var firstImgLi = imgBox.querySelector('li:first-of-type');
    // 最后一张图片
    var lastImgLi = imgBox.querySelector("li:last-of-type");
    var bannerWidth = banner.offsetWidth;
    // 在imgBox前后添加图片
    imgBox.insertBefore(lastImgLi.cloneNode(true),firstImgLi);
    imgBox.appendChild(firstImgLi.cloneNode(true));
    // 重新设置imgBox宽度
    var lis = imgBox.querySelectorAll('li');
    var lisCount = lis.length;
    imgBox.style.width = lis.length * bannerWidth + "px";
    // 给每一个li设置宽度
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.width = bannerWidth + "px";
    }

    // 根据坐标设置白点
    var whiltepoits = poitBox.querySelectorAll('li');
    var setWhiltePoit = function (index) {
          // 排他法--去除白点标记事件
          for (var i = 0; i < whiltepoits.length; i++) {
                whiltepoits[i].classList.remove("now");
          }
          whiltepoits[index - 1].classList.add('now');
    };

    /*自动轮播*/
    var timeId = 0;
    var index = 1;
    var autoPlay = function () {
        timeId = setInterval(function () {
             index++;
             imgBox.style.transition = "left 0.5s";
             imgBox.style.left = -(index * bannerWidth) + "px";
        },2000);
    };
    autoPlay();

    /*手动轮播*/
    var moveX = 0;
    var startX = 0;
    var distanceX = 0;
    var isTranslateEnd = true; // 是否过渡完毕

    imgBox.addEventListener("touchstart",function (e) {
        clearInterval(timeId);
        startX =  e.targetTouches[0].clientX;
    });
    imgBox.addEventListener("touchmove",function (e) {
        if(isTranslateEnd){
            moveX = e.targetTouches[0].clientX;
            distanceX = moveX - startX;
            imgBox.style.transition = "none";
            imgBox.style.left = -(index * bannerWidth) + distanceX + "px";
        }
    });
    imgBox.addEventListener("touchend",function () {
        isTranslateEnd = false;
        if(Math.abs(distanceX) > 100){  // 取得距离的绝对值>100 跳到下一页
           if(distanceX > 0){ // 上一张
                index --;
           }else{ // 下一张
                index ++ ;
           }
            imgBox.style.transition = "left 0.5s";
            imgBox.style.left = -(index * bannerWidth)  + "px";
        }else if(Math.abs(distanceX)  > 0){  // 回弹到上一页
            imgBox.style.transition = "left 0.5s";
            imgBox.style.left = -(index * bannerWidth)  + "px";
        }
        moveX = 0;
        startX = 0 ;
        distanceX = 0;
        setTimeout(function () {
            isTranslateEnd = true;
            clearInterval(timeId);
            autoPlay();
        },500);
    });
    imgBox.addEventListener("webkitTransitionEnd",function () {
         if(index == (lisCount - 1)){
              index = 1;
             imgBox.style.transition = "none";
             imgBox.style.left = -(index * bannerWidth) + "px";
         }else if(index == 0){
              index = lisCount - 2 ;
             imgBox.style.transition = "none";
             imgBox.style.left = - (index * bannerWidth) + "px";
         }
          setWhiltePoit(index);

    });


    window.onblur = function () {
         clearInterval(timeId);
    };
    window.onfocus = function () {
         autoPlay();
    };

}

/*解析json并渲染生成*/
function readJsonCreateBanner() {
    $.ajax({
        type:"get",
        url:"./js/imgData.json",
        success:function (result) {
           var  bannerHtml = "";
           var  poitsHtml = "";
           for (var i = 0; i < result.length; i++) {
             bannerHtml += ' <li>\n' +
                 '                          <a href="javascript:void(0);">\n' +
                 '                              <img src="'+result[i].src+'" alt="">\n' +
                 '                          </a>\n' +
                 '                      </li>';
             if(i == 0){
                 poitsHtml += '<li class="now"></li>';
             }else{
                 poitsHtml += '<li></li>';
             }

             // 添加节点
             $(".jd_banner > ul:first-of-type").html(bannerHtml);
             $(".jd_banner > ul:last-of-type").html(poitsHtml);
           }
            // 添加轮播图事件
            banner();

        }
    });
}
